<template>
    <div>
        <table class="table table-success">
            <tbody>
                <tr>
                    <td>房间名称[房号]</td>
                    <td>
                        <input type="text" placeholder="请输入房号" v-model="data.houseName">
                    </td>
                </tr>
                <tr>
                    <td>价格</td>
                    <td>
                        <input type="text" placeholder="请输入价格" v-model="data.price">
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input type="file" @change="upload">
                        <img :src="'https://localhost:7145'+data.houseImg" style="width: 100px;height: 100px;" alt="">
                    </td>
                </tr>
                <tr>
                    <td>房型</td>
                    <td>
                        <select v-model="data.tid">
                            <option v-for="item in type" :value="item.tid">{{item.tname}}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" :value="true" v-model="data.state">启用
                        <input type="radio" :value="false" v-model="data.state">禁用
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="保存" @click="Add">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
var router = useRouter();
//房间表
const data=ref({
    "houseID": 0,
  "houseName": "",
  "price": 0,
  "tid": 0,
  "houseImg": "",
  "state": true
})
//房型表
const type=ref([{
   "tid": 0,
    "tname": ""
}])
onMounted(()=>{
    GetHouse();
})
//绑定下拉
const GetHouse=()=>{
    axios.get("https://localhost:7145/api/Hotel/GetType").then(res=>{
        type.value= res.data;
    })
}
//上传
const upload=(e:any)=>{
    debugger
    var f =e.target.files[0];
    var fd = new FormData();
    fd.append("file",f);
    axios.post("https://localhost:7145/api/Upload/Up",fd).then(res=>{
        data.value.houseImg=res.data;
    })
}
//添加
const Add=()=>{
    axios.post("https://localhost:7145/api/Hotel/AddHotel",data.value).then(res=>{
        if(res.data>0)
        {
            alert("添加成功");
            router.push({path:"/"})
        }
        else
        {
            alert("添加失败")
        }
    })
}

</script>

<style scoped>

</style>